<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>考核练习项目</title>
    <link rel="stylesheet" type="text/css" href="../static/jquery-easyui-1.7.0/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../static/jquery-easyui-1.7.0/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../static/jquery-easyui-1.7.0/demo/demo.css">
    <script type="text/javascript" src="../static/jquery-easyui-1.7.0/jquery.min.js"></script>
    <script type="text/javascript" src="../static/jquery-easyui-1.7.0/jquery.easyui.min.js"></script>
    <!--插件 - EasyUI导出数据表格-->
    <script type="text/javascript" src="../static/jquery-easyui-1.7.0/datagrid-export.js"></script>
</head>
<body>
<div style="margin:20px 0;"></div>

<!--数据表格-->
<table id="dg" class="easyui-datagrid" iconCls="icon-ok" title="人 员 信 息 表" style="width:100%;height:500px;"
       data-options="rownumbers:true,fitColumns:true,singleSelect:true,
       toolbar:tb,pagination:true,pageSize:10">
    <!-- pagination:true表示在底部加载分页插件
    在表格获取远程数据的请求url中会附带分页参数page（当前页数）和rows（每页显示数）-->
    <thead>
    <tr>
        <th data-options="field:'ck',checkbox:true"></th>
        <th data-options="field:'column2',width:130,align:'center'">姓名</th>
        <th data-options="field:'column3',width:200,align:'center'">姓名全拼</th>
        <th data-options="field:'column4',width:100,align:'center'">性别</th>
        <th data-options="field:'column5',width:150,align:'center'">身份证类型</th>
        <th data-options="field:'column6',width:250,align:'center'">身份证号码</th>
        <th data-options="field:'column7',width:240,align:'center'">出生日期</th>
        <th data-options="field:'column8',width:240,align:'center'">手机号码</th>
        <th data-options="field:'column9',width:240,align:'center'">电子邮箱</th>
    </tr>
    </thead>
</table>

<!--数据表格顶部工具栏-->
<div id="tb">
    <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true"
       onclick="$('#dlg').dialog('open').dialog('setTitle', '添加用户信息');
            $('#fm').form('clear');">添 加</a>
    <a href="#" id="edit" class="easyui-linkbutton" iconCls="icon-edit" plain="true"
       onclick="">修 改</a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true"
       onclick="removeUser()">删 除</a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-ok" plain="true"
       onclick="$('#dg').datagrid('toExcel','人员信息表 - 当前页信息.xls')">导 出 当 前 页 数 据 Excel</a>

    <input id="file_upload" class="easyui-filebox" style="width: 250px"
           data-options="prompt:'选 择 文 件',buttonText:'上 传 文 件'">
    <a id="uploadFile" class="easyui-linkbutton" iconCls="icon-back" plain="true"
    >导 入</a>

    <!--
    编码方式enctype必须是“multipart/form-data”
    指表单数据中由多部分构成，既有文本数据，又有文件等二进制数据
    默认情况下，enctype的值是“application/x-www-form-urlencoded”,不能用于文件上传
    只有使用了“multipart/form-data”，才能完整的传递文件数据
    -->
    <!--    <form id="fileForm" enctype="multipart/form-data">-->
    <!--        <input type="file" name="file" id="file_upload">-->
    <!--        <button type="button" id="uploadFile">导入</button>-->
    <!--    </form>-->

    <a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true"
       onclick="location.href='http://localhost:80/test/export';">导 出 所 有 数 据 Excel</a>

    <div id="searchboxWrapper" style="display: inline-block; padding-top: 3px; text-align: right;
        width: 200px;">
        <input id="searchbox" class="easyui-searchbox" searcher="searcherFun" prompt="请输入查询内容"
               style="width: 200px; margin-top: 10px; padding-top: 10px;">
        <!--        下拉多选框：由JS动态渲染-->
        <div id="mm" style="width: 100px">
        </div>
    </div>
</div>

<!--对话框：添加用户信息-->
<div id="dlg" class="easyui-dialog" style="width:400px;height:500px;padding:10px 20px"
     closed="true" buttons="#dlg-buttons">
    <!--    <div class="ftitle">用户信息：</div>-->
    <form id="fm" method="post">
        <div style="margin-bottom:20px">
            <!--            <label>姓名：</label>-->
            <input name="column2" class="easyui-textbox validatebox" style="width:100%" missingMessage="请填写姓名"
                   data-options="label:'姓名：',validType:'name',required:true, prompt:'不为空且不能输入 -'">
        </div>
        <div style="margin-bottom:20px">
            <input name="column3" class="easyui-textbox validatebox" style="width:100%" missingMessage="请填写姓名全拼"
                   data-options="label:'姓名全拼：',required:true">
        </div>
        <div style="margin-bottom:20px">
            <select name="column4" class="easyui-combobox validatebox" style="width:100%" missingMessage="请填写性别"
                    data-options="label:'性别：',required:true">
                <option value="男">男</option>
                <option value="女">女</option>
            </select>
        </div>
        <div style="margin-bottom:20px">
            <select name="column5" class="easyui-combobox validatebox" style="width:100%" missingMessage="请填写身份证类型"
                    data-options="label:'身份证类型：',required:true">
                <option value="居民身份证">居民身份证</option>
                <option value="士官证">士官证</option>
                <option value="学生证">学生证</option>
                <option value="驾驶证">驾驶证</option>
                <option value="护照">护照</option>
                <option value="港澳通行证">港澳通行证</option>
            </select>
        </div>
        <div style="margin-bottom:20px">
            <input name="column6" class="easyui-textbox validatebox" style="width:100%" missingMessage="请填写身份证号（固定18位）"
                   data-options="label:'身份证号：',required:true,validType:'length[18,18]', prompt:'固定18位'">
        </div>
        <div style="margin-bottom:20px">
            <input name="column7" class="easyui-datetimebox validatebox" style="width:100%" missingMessage="请填写生日"
                   data-options="label:'出生日期：',required:true">
        </div>
        <div style="margin-bottom:20px">
            <input name="column8" class="easyui-textbox validatebox" style="width:100%" missingMessage="请填写手机号（11位）"
                   data-options="label:'手机号：',required:true,validType:'length[11,11]', prompt:'固定11位'">
        </div>
        <div style="margin-bottom:20px">
            <input name="column9" class="easyui-textbox validatebox" style="width:100%" missingMessage="请填写电子邮箱"
                   data-options="label:'电子邮箱：',required:true,validType:'email'">
        </div>
    </form>
</div>
<div id="dlg-buttons">
    <a type="submit" class="easyui-linkbutton" iconCls="icon-ok" onclick="newUser()">保存</a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-cancel"
       onclick="javascript:$('#dlg').dialog('close')">取消</a>
</div>

<!--对话框：修改用户信息-->
<div id="dlg2" class="easyui-dialog" style="width:400px;height:500px;padding:10px 20px"
     closed="true" buttons="#dlg-buttons2">
    <!--    <div class="ftitle">用户信息：</div>-->
    <form id="fm2" method="post">
        <div style="margin-bottom:20px">
            <!--            <label>姓名：</label>-->
            <input name="column2" class="easyui-textbox validatebox" style="width:100%" missingMessage="请填写姓名"
                   data-options="label:'姓名：',validType:'name',required:true, prompt:'不为空且不能输入 -'">
        </div>
        <div style="margin-bottom:20px">
            <input name="column3" class="easyui-textbox validatebox" style="width:100%" missingMessage="请填写姓名全拼"
                   data-options="label:'姓名全拼：',required:true">
        </div>
        <div style="margin-bottom:20px">
            <select name="column4" class="easyui-combobox validatebox" style="width:100%" missingMessage="请填写性别"
                    data-options="label:'性别：',required:true">
                <option value="男">男</option>
                <option value="女">女</option>
            </select>
        </div>
        <div style="margin-bottom:20px">
            <select name="column5" class="easyui-combobox validatebox" style="width:100%" missingMessage="请填写身份证类型"
                    data-options="label:'身份证类型：',required:true">
                <option value="居民身份证">居民身份证</option>
                <option value="士官证">士官证</option>
                <option value="学生证">学生证</option>
                <option value="驾驶证">驾驶证</option>
                <option value="护照">护照</option>
                <option value="港澳通行证">港澳通行证</option>
            </select>
        </div>
        <div style="margin-bottom:20px">
            <input name="column6" class="easyui-textbox validatebox" style="width:100%" missingMessage="请填写身份证号（固定18位）"
                   data-options="label:'身份证号：',required:true,validType:'length[18,18]', prompt:'固定18位'">
        </div>
        <div style="margin-bottom:20px">
            <input name="column7" class="easyui-datetimebox validatebox" style="width:100%" missingMessage="请填写生日"
                   data-options="label:'出生日期：',required:true">
        </div>
        <div style="margin-bottom:20px">
            <input name="column8" class="easyui-textbox validatebox" style="width:100%" missingMessage="请填写手机号（11位）"
                   data-options="label:'手机号：',required:true,validType:'length[11,11]', prompt:'固定11位'">
        </div>
        <div style="margin-bottom:20px">
            <input name="column9" class="easyui-textbox validatebox" style="width:100%" missingMessage="请填写电子邮箱"
                   data-options="label:'电子邮箱：',required:true,validType:'email'">
        </div>
    </form>
</div>
<div id="dlg-buttons2">
    <a type="submit" class="easyui-linkbutton" iconCls="icon-ok" onclick="editUser()">保存</a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-cancel"
       onclick="javascript:$('#dlg2').dialog('close')">取消</a>
</div>

<!-- 引入Axios -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>


<script type="text/javascript">
    // 自定义EasyUI验证规则
    $.extend($.fn.validatebox.defaults.rules, {
        name: {
            validator: function (value) {
                //不能输入 -,
                var reg = /^[^-,]*$/;
                return reg.test(value);
            },
            message: '段名不能含有 - , 字符'
        }
    });


    // 新增
    function newUser() {
        // 获取表单所有数据，序列化成一个字符串
        let form = $("#fm").serialize();

        axios({
            url: 'http://localhost:80/test/add',
            method: 'post',
            data: form
        }).then(res => {  // 请求成功
            alert("新增成功")
        })
    }


    // 上传文件
    $('#uploadFile').click(function () {
        //构建一个FormData存储复杂对象
        var formData = new FormData();

        // $('#file_upload').filebox("files")[0]获取EasyUI的Filebox中存储的文件对象
        formData.append('file', $('#file_upload').filebox("files")[0]);

        $.ajax({
            url: 'http://localhost:80/test/upload', //单文件上传
            type: 'POST',
            data: formData,
            processData: false,  // 不对数据进行序列化（必须）
            contentType: false,  // 不对数据设置请求头（必须）
            success: function (res) {
                alert("导入成功")
            }
        });
    })


    // 条件搜索（分页查询）
    function searcherFun(value, name) {
        // value：搜索框中的内容；name：下拉菜单的字段名
        // 例如下拉菜单选择 “姓名”，搜索框填写 “123”，则value：123；name：column2
        // alert(name + value)
        // 使用Axios实现，但很难将其渲染到EasyUI的数据表格中
        // axios.get('http://localhost:80/test/selectUserByColumnAndKey?column='
        //     + name + '&key=' + value).then(res => {
        //     alert("查询成功")
        // })

        // EasyUI数据网格对象发起请求：将查询结果渲染到表格中
        $('#dg').datagrid({
            // EasyUI表格中添加了分页插件后，会自动在请求url中附带分页参数page（当前页数）和rows（每页显示数）
            // 所以不需要手动添加分页参数
            // EasyUI数据网格内置了Ajax异步请求
            url: 'http://localhost:80/test/selectUserByColumnAndKey?column='
                + name + '&key=' + value,
            method: 'GET'
        });

        // 对条件搜索进行分页查询
        var pager = $('#dg').datagrid('getPager');  // 获取分页对象
        // 分页配置
        pager.pagination({
            // 设置分页中文提示信息
            beforePageText: '第',  // 提示文字：页数文本框前显示信息
            afterPageText: '页    共 {pages} 页',  // 提示文字：页数文本框后显示信息
            displayMsg: '显示 {from} 到 {to} 总共 {total} 条记录',  // 提示文字：页面概览信息

            // onSelectPage: function (pageNumber, pageSize) {
            //     $(this).pagination('loading');  // 提醒分页控件正在加载中
            //     alert('pageNumber:' + pageNumber + ',pageSize:' + pageSize);
            //     $(this).pagination('loaded');  // 提醒分页控件加载完成
            // }
        });
    }

    // 根据当前页面表格字段渲染下拉多选框选项
    function initSearchbox() {
        // 循环列名，生成搜索的下拉列表
        var fields = $(dg).datagrid('getColumnFields');
        var muit = "";

        // i=1是因为不渲染表格中未显示的第一个字段Column_1
        for (var i = 1; i < fields.length; i++) {
            var opts = $(dg).datagrid('getColumnOption', fields[i]);
            if (opts.table) {
                muit += "<div name='" + opts.table + "." + opts.column + "'>" + opts.title + "</div>";
            } else {
                muit += "<div name='" + fields[i] + "'>" + opts.title + "</div>";
            }
        }

        $(mm).html($(mm).html() + muit);
        $('#searchbox').searchbox({
            menu: '#mm'
        });

        // 将渲染好的搜索框放入工具栏
        $(".datagrid-toolbar").append($("#searchboxWrapper"));
    }


    // 点击按钮时检查用户是否选择了要修改的行
    $('#edit').click(function () {
        // 获取指定行用户信息
        var row = $('#dg').datagrid('getSelected');
        // 获取该行的字段，比如Column_1
        // var rowColumn = row.column1;

        // 检查用户是否选择了要修改的行
        if (row === null) {
            alert("请选择一位用户进行编辑！")
        } else {
            // 弹出对话框进行修改
            $('#dlg2').dialog('open').dialog('setTitle', '修改用户信息');
            $('#fm2').form('clear');
        }
    })

    // 修改
    function editUser() {
        // 获取该行用户信息
        // var row = $('#dg').datagrid('getSelected');
        // 获取该行的字段，比如Column_1
        // var rowColumn = row.column1;

        // 获取表单所有数据，序列化成一个字符串
        let form = $("#fm2").serialize();
        // 加上用户主键Column_1
        var request = "column1=" + $('#dg').datagrid('getSelected').column1 + "&" + form;

        axios({
            url: 'http://localhost:80/test/update',
            method: 'post',
            data: request
        }).then(res => {  // 请求成功
            alert("修改成功")
        })
    }

    // 删除
    function removeUser() {
        // 获取指定行用户信息
        var row = $('#dg').datagrid('getSelected');

        if (row) {  // 检测用户是否选择了指定行
            $.messager.confirm('删除用户信息', '确定要删除用户信息吗?', function (r) {
                if (r) {
                    axios.post("http://localhost:80/test/delete?column1=" + row.column1,
                    ).then(res => {
                        alert("删除成功")
                    })
                }
            });
        } else {
            alert("请选择一位用户进行删除！")
        }
    }


    // 页面加载时执行
    $(function () {
        // EasyUI数据网格对象配置
        $('#dg').datagrid({
            // EasyUI表格中添加了分页插件后，会自动在请求url中附带分页参数page（当前页数）和rows（每页显示数）
            // 所以不需要手动添加分页参数
            // EasyUI数据网格内置了Ajax异步请求
            url: 'http://localhost:80/test/selectPage',
            method: 'GET'
        });


        // EasyUI分页配置
        // 要放在上一句EasyUI数据网格对象配置之后，也就是等数据网格配置之后再执行
        // 否则会因为DataGrid尚未初始化，无法将分页插件配置渲染到页面上
        var pager = $('#dg').datagrid('getPager');  // 获取分页对象
        // 分页配置
        pager.pagination({
            // 设置分页中文提示信息
            beforePageText: '第',  // 提示文字：页数文本框前显示信息
            afterPageText: '页    共 {pages} 页',  // 提示文字：页数文本框后显示信息
            displayMsg: '显示 {from} 到 {to} 总共 {total} 条记录',  // 提示文字：页面概览信息

            // onSelectPage: function (pageNumber, pageSize) {
            //     $(this).pagination('loading');  // 提醒分页控件正在加载中
            //     alert('pageNumber:' + pageNumber + ',pageSize:' + pageSize);
            //     $(this).pagination('loaded');  // 提醒分页控件加载完成
            // }
        });

        // 调用渲染搜索多选框
        initSearchbox();

        // 本想使用Axios响应后端数据，琢磨了一下午还是想不到怎么将响应数据渲染到EasyUI组件中
        // axios({
        //     url: 'http://localhost:80/test/selectAll',
        //     method: 'get',
        // }).then(res => {  // 请求成功
        //     // alert(res.data.data[0].column2)  // 输出：李进成
        //
        //     // 获取表格的 tbody 元素
        //     var tbody = $('#dg').find('tbody');
        //
        //     // 遍历数据并创建表格行
        //     $.each(res.data.data, function(index, item) {
        //         var row = $('<tr></tr>');
        //         row.append($('<td></td>').text(item.column2));
        //         row.append($('<td></td>').text(item.column3));
        //         row.append($('<td></td>').text(item.column4));
        //         row.append($('<td></td>').text(item.column5));
        //         row.append($('<td></td>').text(item.column6));
        //         row.append($('<td></td>').text(item.column7));
        //         row.append($('<td></td>').text(item.column8));
        //         row.append($('<td></td>').text(item.column9));
        //         // 将新行添加到 tbody 中
        //         tbody.append(row);
        //     });
        // })
    })
</script>
</body>
</html>